<template>
  <div class="admin_index">
    <el-card class="box-card">
      <div slot="header" class="clearfix header_bar">
        <el-input v-model="input" placeholder="请输入用户名" style="width:200px;margin-right:10px"></el-input>
        <el-select v-model="value" placeholder="请选择用户状态" style="width:200px;margin-right:10px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
        <el-button type="primary" icon="el-icon-plus">新增</el-button>
        <el-button type="info" icon="el-icon-delete">卸载</el-button>
      </div>
      <div class="user_info">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="标题"></el-table-column>
          <el-table-column prop="name" label="内容"></el-table-column>
          <el-table-column prop="address" label="发送时间"></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        class="paginations"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage2"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="sizes, prev, pager, next"
        :total="1000"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      currentPage2: 5
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="less" scoped>
.admin_index {
  // min-width: 1280px;
  padding: 20px;
}
.header_bar {
  display: flex;
  align-items: center;
}
.user_info {
  width: 100%;
  display: flex;
  flex-direction: column;
  //   padding-left: 20px;
}
.paginations{
    padding-top: 20px;
    transform: translateX(-10px);
}
</style>